<template>
    <date-picker v-model="time" type="date" range :placeholder="placeholder" />
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
    name: "Datepicker",
    components: { DatePicker },
    props: {
        value: { type: Array, default: () => [] },
        start: { type: [Number, String], default: '' },
        end: { type: [Number, String], default: '' },
        placeholder: { type: String, default: "Start date to End date" },
    },
    computed: {
        time: {
            get () {
                if (this.value && this.value.length > 0) {
                    let start = new Date(parseInt((this.value[0] + "000").substring(0, 13)));
                    let end = new Date(parseInt((this.value[1] + "000").substring(0, 13)))
                    if (start && end) {
                        return [start, end];
                    } else {
                        return null;
                    }
                } else if (this.start && this.end) {
                    const start = new Date(parseInt((this.start + "000").substring(0, 13)));
                    const end = new Date(parseInt((this.end + "000").substring(0, 13)));
                    return [start, end];
                } else {
                    return null;
                }
            },
            set (val) {
                let value = val || [];
                let start = value[0] ? value[0].getTime() : 0;
                let end = value[1] ? value[1].getTime() + 86399000 : 0; // 设置最后选择为23.59.59
                let time = this.time || [0, 0];

                if (JSON.stringify(time) == JSON.stringify([start, end])) {
                    // 相同
                } else if (start && end) {
                    this.$emit("input", [start, end]);
                    this.$emit("update:start", start / 1000);
                    this.$emit("update:end", end / 1000);
                    this.$emit("change");
                } else {
                    // this.$emit("input", null);
                    this.$emit("update:start", null);
                    this.$emit("update:end", null);
                    this.$emit("change");
                }
            },
        },
    },
};
</script>
<style lang="scss" >
.mx-datepicker-popup {
    background: #ffffff;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    border: 1px solid #ebebeb;
}

.mx-btn-text {
    display: inline-block;
}

.mx-calendar-content .cell:hover {
    background-color: rgba($color: #ea4c89, $alpha: 0.08);
}
.mx-calendar-content .cell.active {
    background: #ea4c89;
    // border-radius: 32px;
}

.mx-calendar-content .cell.in-range,
.mx-calendar-content .cell.hover-in-range {
    color: #000;
    background-color: rgba($color: #ea4c89, $alpha: 0.08);
}
</style>
<style lang="scss" scoped>
.mx-datepicker {
    min-width: 210px;
    &::v-deep {
        input {
            height: 40px;
            background: #ffffff;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 14px;
            padding: 11px 30px 11px 12px;
            line-height: 16px;
            margin-right: 12px;

            color: #000;
            box-shadow: none;
            border: 1px solid #e6e6e6;

            &::placeholder {
                color: #757575;
            }

            &:hover {
                border-color: #c7c7c7;
            }

            &:focus {
                border-color: #f6b2cd;
                box-shadow: 0 0 1px 1px #f6b2cd;
            }
        }

        .mx-icon-calendar {
            color: #555;
        }
    }
}
</style>
